<nz-content class="main-content">
  <div nz-row>
    <div nz-col nzSpan="18">
      <widget-button-group
        [buttonsConfig]="buttonConfigService.buttonsConfig"
      ></widget-button-group>
    </div>
    <div nz-col nzSpan="6" style="float: right">
      <nz-input-group nzSearch [nzSize]="theme.size" [nzAddOnAfter]="suffixButton">
        <input
          type="text"
          [(ngModel)]="searchText"
          nz-input
          placeholder="输入用户名"
          (keyup.enter)="search()"
        />
      </nz-input-group>
      <ng-template #suffixButton>
        <button nz-button [nzSize]="theme.size" nzSearch (click)="search()" style="color: black">
          查询
        </button>
      </ng-template>
    </div>
  </div>
  <div nz-row class="main-row">
    <div nz-col nzSpan="14">
      <nz-card nzTitle="用户信息" class="user-card">
        <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
          <nz-form-item>
            <nz-form-label [nzSpan]="4" nzRequired>用户名</nz-form-label>
            <nz-form-control [nzSpan]="18" nzHasFeedback>
              <input nz-input formControlName="userName" placeholder="请输入用户名" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item *ngIf="showPasswordInput">
            <nz-form-label [nzSpan]="4" nzRequired>密码</nz-form-label>
            <nz-form-control [nzSpan]="18" nzHasFeedback>
              <input
                nz-input
                type="password"
                autocomplete="new-password"
                formControlName="password"
                placeholder="请输入密码"
              />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="4" nzRequired>姓名</nz-form-label>
            <nz-form-control [nzSpan]="18" nzHasFeedback>
              <input nz-input formControlName="name" placeholder="请输入姓名" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="4" nzRequired>邮箱</nz-form-label>
            <nz-form-control [nzSpan]="18" nzHasFeedback>
              <input nz-input formControlName="email" placeholder="请输入邮箱" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="4">电话</nz-form-label>
            <nz-form-control [nzSpan]="18" nzHasFeedback>
              <input nz-input formControlName="phoneNumber" placeholder="请输入电话" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="4" [nzNoColon]="true"></nz-form-label>
            <nz-form-control [nzSpan]="18">
              <label nz-checkbox formControlName="lockoutEnabled">登录失败,账户被锁定</label
              ><label nz-checkbox formControlName="isActive">启用</label>
            </nz-form-control>
          </nz-form-item>
        </form>
      </nz-card>
    </div>
    <div nz-col nzSpan="10">
      <nz-card nzTitle="角色信息" style="min-height: 100%">
        <nz-checkbox-wrapper (nzOnChange)="onSelectedRolesChanged($event)">
          <div nz-row>
            <div nz-col nzSpan="12" *ngFor="let role of stateService.roles">
              <label nz-checkbox [nzValue]="role.value" [(ngModel)]="role.checked">
                {{ role.label }}
              </label>
            </div>
          </div>
        </nz-checkbox-wrapper>
      </nz-card>
    </div>
  </div>
</nz-content>
